<!DOCTYPE html>
<!--
  - This file is part of Avenge <https://adblockplus.org/>,
  - Copyright (C) 2006-present eyeo GmbH
  -
  - Avenge is free software: you can redistribute it and/or modify
  - it under the terms of the GNU General Public License version 3 as
  - published by the Free Software Foundation.
  -
  - Avenge is distributed in the hope that it will be useful,
  - but WITHOUT ANY WARRANTY; without even the implied warranty of
  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  - GNU General Public License for more details.
  -
  - You should have received a copy of the GNU General Public License
  - along with Avenge.  If not, see <http://www.gnu.org/licenses/>.
  -->
<html>
  <head>
    <meta charset="utf-8">
    <title>Test io-scrollbar.js</title>
    <link rel="stylesheet" href="../skin/common.css">
    <link rel="stylesheet" href="../skin/fonts.css">
    <link rel="stylesheet" href="../skin/desktop-options.css">
    <link rel="stylesheet" href="../smoke/css/io-scrollbar.css">
    <script defer src="../polyfill.js"></script>
    <script defer src="../ext/common.js"></script>
    <script defer src="../ext/content.js"></script>
    <script defer src="../common.js"></script>
    <script defer src="../i18n.js"></script>
    <script defer src="./io-scrollbar.js"></script>
    <style>
    #target
    {
      overflow: auto;
      position: absolute;
      top: 0;
      right: 16px;
      left: 0;
      box-sizing: border-box;
    }

    io-scrollbar
    {
      position: absolute;
      top: 0;
      right: 0;
      background-color: #fff;
    }

    footer
    {
      position: absolute;
      bottom: 25%;
      text-align: center;
      font-weight: 700;
    }
    </style>
  </head>
  <body>
    <div id="target">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut bibendum massa. Suspendisse fringilla, metus eget tincidunt pellentesque, nunc nisl molestie ante, ac accumsan nisi diam quis massa. Integer sit amet nunc lectus. Quisque vitae pharetra libero, quis volutpat enim. Morbi ut ornare felis. Etiam pharetra ante a velit vehicula auctor. Suspendisse quis maximus eros. Maecenas rhoncus turpis quis dui placerat cursus. Phasellus gravida euismod rhoncus. Aenean varius, sapien vitae viverra sagittis, diam nulla molestie lorem, nec cursus arcu sem at neque. Cras auctor mauris leo, et suscipit arcu eleifend sit amet. In feugiat felis enim, eu placerat neque eleifend efficitur. Morbi sollicitudin porttitor dolor ut sollicitudin. Aenean elementum sem eget leo suscipit, auctor aliquam nibh aliquam. Proin pretium, nulla et feugiat egestas, purus lorem ullamcorper mi, vestibulum maximus turpis odio vel tortor. Curabitur nec erat nisl.
      </p>
      <p>
        Sed varius lacinia arcu, ac volutpat ante. Nunc vestibulum pellentesque mauris eu suscipit. Fusce tempus risus sit amet lobortis luctus. Pellentesque facilisis rhoncus ligula lacinia imperdiet. In id dictum est. Aliquam porttitor, dolor at interdum scelerisque, leo velit aliquet tortor, sit amet aliquet lacus magna ut felis. Morbi dignissim mi urna, id consequat purus vestibulum sit amet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin sed felis rhoncus, accumsan libero a, sollicitudin mauris. Etiam tempus lacus hendrerit, sollicitudin massa sed, fringilla libero. Aliquam erat volutpat. Mauris quis ligula sit amet nunc congue vulputate non at felis.
      </p>
      <p>
        Sed sed suscipit nulla. In sed dapibus mi. Mauris tristique eu elit in elementum. Phasellus tempus risus ante, at suscipit enim maximus ultricies. Etiam ante ex, mattis non finibus eu, posuere at tortor. Curabitur at eros at massa tempus maximus eget finibus elit. Etiam suscipit, eros vitae euismod euismod, ligula tellus finibus neque, et lacinia velit ligula sit amet leo.
      </p>
      <p>
        Nulla vitae nunc nec arcu maximus consectetur ac eget felis. Pellentesque quis nisi imperdiet, rhoncus orci non, congue diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis, magna eget viverra blandit, neque enim vehicula enim, et feugiat nisl odio id lorem. Phasellus iaculis tristique aliquam. Sed consectetur ullamcorper ligula, ut efficitur dolor varius id. Donec nec sem ut dolor ultrices euismod in ut massa. Integer lobortis odio congue, feugiat purus at, rutrum lacus. Praesent tincidunt lorem eget ante accumsan ultricies. Fusce iaculis nisl vel ante laoreet venenatis. Suspendisse nec ipsum nec lacus condimentum finibus vel sit amet diam.
      </p>
      <p>
        Suspendisse a dolor maximus justo cursus gravida. Mauris ornare tincidunt cursus. Nulla facilisi. Nunc mollis cursus enim nec vestibulum. Curabitur dictum vitae diam eu sodales. Etiam sed tellus id magna sollicitudin viverra vel ut ligula. Nunc condimentum in lorem ac interdum. Maecenas a nunc sed nunc vehicula ullamcorper. Ut arcu nisi, pellentesque id blandit id, interdum non mi. Nullam vel dictum enim. Fusce condimentum odio sit amet turpis ultrices, quis blandit arcu pellentesque. Morbi eget interdum ipsum. Vestibulum a diam sed ligula commodo semper. In fringilla libero orci, nec ultricies nibh tincidunt vitae. Phasellus eget urna ornare, aliquet elit eu, dapibus justo.
      </p>
    </div>
    <io-scrollbar></io-scrollbar>
    <footer>Use <code>?size=150</code> query string to change height of the container.</code></footer>
  </body>
</html>
